<!--筛选弹窗组件-->
<template>
  <van-popup v-model="showScreen" position="right" class="screen-popup" :close-on-click-overlay="false">
    <view class="main">
      <view class="screen-option-container-main">
        <plateTitle title="工单类型：" :isRequired="false" class="plate-title"/>
        <view class="screen-option-container">
          <view class="screen-option-item-main"
                :class="{active: (index*1+1) === isSelectType}"
                v-for="(item,index) in orderList"
                @click="selectTypeBtn(item,index)">{{ item.TITLE }}
          </view>
        </view>
        <plateTitle title="发起时间：" :isRequired="false" class="plate-title"/>
        <view class="screen-option-container">
          <view class="screen-option-item"
                :class="{active: (index*1+1) === isSelect}"
                v-for="(item,index) in typeList"
				:key="index"
                @click="activeBtn(item,index)">{{ item.TITLE }}
          </view>
        </view>
        <plateTitle title="其他时间：" :isRequired="false" class="plate-title"/>
        <view class="screen-option-container">
          <view class="screen-option-item"
                :class="{active: index === isActive}"
                v-for="(item,index) in otherList"
				:key="index"
                @click="selectBtn(item,index)">{{ item.TITLE }}
          </view>
          <van-cell-group>
            <van-field v-model="beginTime" name="beginTime" label="计划开始时间" readonly placeholder="选择计划开始时间"
                       input-align="right" right-icon="arrow" required error-message-align="right"
                       @click="onOpenPicker('beginTime')" :rules="[{ required: true, trigger:'onChange'}]" />
            <van-field v-model="endTime" name="endTime" label="计划结束时间" readonly placeholder="选择计划结束时间"
                       input-align="right" right-icon="arrow" required error-message-align="right"
                       @click="onOpenPicker('endTime')" :rules="[{ required: true, trigger:'onChange'}]" />
          </van-cell-group>
          <!--时间选择器-->
          <van-popup v-model="showPicker" position="bottom">
            <van-datetime-picker :type="datepickertype" :formatter="formatter"  cancel-button-text="清空"
                                 @confirm="onDatetimeConfirm" @cancel="onDatetimeEmpty" v-model="currentDate"
                                 :min-date="minDate" />
          </van-popup>
        </view>
      </view>

      <view class="btn-container">
        <van-button block type="info" color="#417ADC" plain @click="reset">重置</van-button>
        <van-button block type="info" color="#417ADC" @click="screenConfirm">确认</van-button>
      </view>
    </view>
  </van-popup>
</template>

<script>
import plateTitle from './plateTitle.vue';
import moment from "moment/moment";
import {Dialog} from "vant";
export default {
  name: "screen",
  components: {plateTitle},
  props: {
    orderList: {
      type:Array,
      required: true,
    },
    typeList: {
      type:Array,
      required: true,
    },
    otherList: {
      type:Array,
      required: true,
    },
    showScreen: {
      type: Boolean,
      required: true,
    }
  },
  watch: {

  },
  data() {
    return {
      beginTime: '',
      endTime: '',
      timeString: '',
      currentDate: '',
      minDate: new Date(0),
      datepickertype: 'year-month',
      showPicker: false,
      isSelectType: 1, // 控制筛选 发起时间选中
      isSelect: 1, // 控制筛选 发起时间选中
      isActive:'', // 控制筛选 其他时间选中
      selected:'',// 选中的值
      beginTimeData: 1, //接收发起时间
      orderType: 0, //接收工单类型
    }
  },
  methods: {
    formatter(type, val) {
      if(this.datepickertype == "date"){
        if (type === 'year') {
          return `${val}年`;
        }else if (type === 'month'){
          return `${val}月`;
        }else if (type === 'day'){
          return `${val}日`;
        }
      }else{
        if (type === 'year') {
          return `${val}年`;
        }else if (type === 'month'){
          return `${val}月`;
        }
      }
    },
    onDatetimeConfirm(time) {
      let timeString = "";
      timeString = this.datepickertype == "year-month" ? moment(time).format('YYYY-MM') : moment(time).format(
          'YYYY-MM-DD')


      if (this.pickerType === 'beginTime') {
        this.beginTime = timeString
        if (
            this.endTime !== '' &&
            new Date(this.endTime).getTime() < new Date(this.beginTime).getTime()
        ) {
          Dialog.alert({
            message: '计划开始时间不可晚于计划结束时间',
            theme: 'round-button'
          })
          this.beginTime = ''
        }
      } else if (this.pickerType === 'endTime') {
        this.endTime = timeString
        if (
            this.beginTime !== '' &&
            new Date(this.endTime).getTime() < new Date(this.beginTime).getTime()
        ) {
          Dialog.alert({
            message: '计划结束时间不可早于计划开始时间',
            theme: 'round-button'
          })
          this.endTime = ''
        }
      }
      this.showPicker = false
    },
    onDatetimeEmpty() {
      this.showPicker = false
      this.pickerType === 'beginTime' && (this.beginTime = '')
      this.pickerType === 'endTime' && (this.endTime = '')
    },

    onOpenPicker(pickerType) {
      if (pickerType === 'beginTime') {
        this.currentDate = this.beginTime !== '' ? new Date(this.beginTime) : new Date()
        if(this.isSelectType == '') {
          this.showPicker = true
        }else {
          this.showPicker = false
        }
      } else if (pickerType === 'endTime') {
        this.currentDate =
            this.endTime !== '' ? new Date(this.endTime) : new Date()
        if(this.isSelectType == '') {
          this.showPicker = true
        }else {
          this.showPicker = false
        }
      }
      this.pickerType = pickerType
      // this.showPicker = true
    },
    // 重置选项
    reset() {
      // 控制工单类型
      this.orderType = 0
      this.isSelectType = 1
      // 控制发起时间
      this.beginTimeData = 1
      this.isSelect = 1
      this.isActive = ''
      this.beginTime=''
      this.endTime=''
      // this.closePopup()
      // this.$emit('reset', false);
    },

    closePopup() {
      this.$emit('closePopup', false);
    },
    selectTypeBtn(item,index) {
      this.isSelectType = index*1+1
      if(item.TITLE) {
        this.isActive = ''
        this.beginTime = ''
        this.endTime = ''
      }
      this.orderType = item.VALUE
    },
    activeBtn(item,index) {
      this.isSelect = index*1+1
      if(item.TITLE) {
        this.isActive = ''
        this.beginTime = ''
        this.endTime = ''
      }
      this.beginTimeData = item.VALUE
    },
    selectBtn(item,index) {
      this.isActive = index
      this.beginTimeData = ''
      if(item.TITLE === '按天'){
        this.datepickertype = 'date'
        this.isSelect = ''
        this.isSelectType = ''
        this.beginTime = ''
        this.endTime = ''
      }else if(item.TITLE === '按月'){
        this.datepickertype = 'year-month'
        this.isSelect = ''
        this.isSelectType = ''
        this.beginTime = ''
        this.endTime = ''
      }else {
        this.showPicker = false
      }
    },
    screenConfirm() {
      this.closePopup()
      this.selected = this.beginTimeData
      this.$emit('confirm',this.selected,this.beginTime,this.endTime,this.orderType)
    },
  }
};
</script>

<style scoped lang="scss">
.screen-popup {
  width: 100vw;
  height: 100vh;
  //height: calc(100vh - #{px2vh(212)});
  //padding: px2vh(162) px2vw(40) px2vh(50);
  padding-top: px2vh(0);
  background: rgba(255,255,255,0);
  .main {
    width: px2vw(900);
    height: 100vh;
    margin-left: calc(100vw - #{px2vw(900)});
    background: #fff;
    .screen-option-container-main {
      height: calc(100vh - #{px2vh(342)});
      padding: px2vh(100) px2vw(40);
      //padding-bottom: px2vh(140);
      .screen-option-container {
        margin-top: px2vh(40);
        display: flex;
        //justify-content: space-between;
        flex-wrap: wrap;

        .screen-option-item {
          width: px2vw(260);
          height: px2vh(90);
          margin-bottom: px2vh(20);
          line-height: px2vh(90);
          background: #f7f7f7;
          color: #666;
          font-size: px2vh(36);
          text-align: center;
          border-radius: $border-radius-base;
        }
        .screen-option-item-main {
          width: px2vw(340);
          height: px2vh(90);
          margin-bottom: px2vh(20);
          line-height: px2vh(90);
          background: #f7f7f7;
          color: #666;
          font-size: px2vh(36);
          text-align: center;
          border-radius: $border-radius-base;
        }
        .screen-option-item-main:first-child {
          margin-right: px2vw(120);
          margin-bottom: px2vh(40);
        }
        .screen-option-item-main:last-child {
          margin-bottom: px2vh(20);
        }
        .screen-option-item:not(:nth-child(3n)) {
          margin-right: px2vw(20);
        }

        .screen-option-item-main.active {
          background: #ecf1fb;
          color: #417ADC;
        }
        .screen-option-item.active {
          background: #ecf1fb;
          color: #417ADC;
        }
      }
    }
  }



  .btn-container {
    display: flex;
    justify-content: space-between;

    .van-button {
      height: px2vh(100);
      margin-left: px2vw(30);
      margin-right: px2vw(30);
      border-radius: $border-radius-base;
    }

  }
}
</style>
